<template>
  <section class="ClusterDemo">
    <my-map
      :adapter="adapter"
      width="100%"
      height="100%"
      ref="myMap"
      :minZoom="4"
      :maxZoom="19"
      :center="center"
      projection="EPSG:3857"
      style="cursor: pointer"
      @ready="mapReady"
    >
      <my-map-scale></my-map-scale>
      <my-map-zoom></my-map-zoom>
    </my-map>
  </section>
</template>

<script>
import {
  MyMap,
  MyMapScale,
  MyMapZoom,
  MyMapPlacement,
  MyMapMarker,
  MyMapLine,
  MyMapPointer,
  MyMapDraw,
} from "$ui/map";
import { MyContextmenu } from "$ui";
import { transform } from "ol/proj";
import { Vector, OSM, Cluster } from "ol/source";
import { Point } from "ol/geom";
import { Vector as layerVector } from "ol/layer";
import { Style as styleStyle, Icon as styleIcon, Circle as styleCircle, Stroke as styleStroke, Fill as styleFill, Text as styleText} from "ol/style";
import Feature from "ol/Feature";

export default {
  name: "ClusterDemo",
  components: {
    MyMap,
    MyMapScale,
    MyMapZoom,
    MyMapPlacement,
    MyMapMarker,
    MyMapLine,
    MyMapPointer,
    MyMapDraw,
    MyContextmenu,
  },
  data() {
    return {
      adapter: {
        type: "XYZ",
        url:
          "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=1&style=7",
      },
      center: transform(
        [parseFloat(118.120866), parseFloat(24.497659)],
        "EPSG:4326",
        "EPSG:3857"
      ),
      olMap: "",
      myMap: "",
      cluster: ''
    };
  },
  computed: {
    zoom: function() {
      return this.olMap.getView ? this.olMap.getView().getZoom() : 0
    }
  },
  watch: {
    zoom:{
      handler(val) {
        if (val != 0 && val == this.olMap.getView().getMaxZoom()) {
          this.cluster.setDistance(0);
        }
        else {
          this.cluster.setDistance(100);
        }
      }
    }
  },
  mounted() {
    //  console.log(Point)
  },
  methods: {
    // 地图初始化完成
    mapReady(map, vm) {
      this.olMap = map;
      this.myMap = vm;
      this.setLayerGroup();
    },
    // 添加测试图层
    setLayerGroup() {
      // 随机创建1000个要素
      let source = new Vector();
      for (let i = 1; i <= 2000; i++) {
        let coordinates = [117.5 + Math.random(), 24.5 + Math.random()];
        coordinates = transform(coordinates, "EPSG:4326", "EPSG:3857");
        let feature = new Feature(new Point(coordinates));
        source.addFeature(feature);
      }

      // 聚合
      let cluster = new Cluster({
        source: source,
        distance: 100,
      });
      this.cluster = cluster
      // 创建图层  未聚合
      // let layer = new layerVector({
      //     source,
      //     style: function (feature, resolution) {
      //         let style = new styleStyle({
      //             image: new styleIcon({
      //                 src: 'img/location.png'
      //             })
      //         })
      //         return style;
      //     }
      // });
      
      // 创建图层  聚合
      var layer = new layerVector({
        source: cluster,
        style: function (feature, resolution) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new styleStyle({
              image: new styleIcon({
                src: "img/location.png",
              }),
            });
          } else {
            return new styleStyle({
              image: new styleCircle({
                radius: 30,
                stroke: new styleStroke({
                  color: "white",
                }),
                fill: new styleFill({
                  color: "blue",
                }),
              }),
              text: new styleText({
                text: size.toString(),
                fill: new styleFill({
                  color: "white",
                }),
              }),
            });
          }
        },
      });

      this.olMap.addLayer(layer);
      console.log(cluster.once)
      console.log(cluster.on)
      cluster.on('click', (event) => {
        console.log(1111)
      })
      this.olMap.on('click', (event,a) => {
        console.log(event,a)
      })
      // 监听地图分辨率改变事件
      // this.olMap.getView().on('change:resolution', function (event) {
      //     if (this.olMap.getView().getZoom() == this.olMap.getView().getMaxZoom()) {
      //         cluster.setDistance(0);
      //     }
      //     else {
      //         cluster.setDistance(100);
      //     }
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.ClusterDemo {
  height: 100%;
  width: 100%;
}
</style>